<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件注册</title>
    <script src="./../vue/vue.js"></script>
</head>
<body>

    <!-- 
        组件
        1、组件名命名规范
            短线分隔    compoent-name   推荐使用这个
            大驼峰      ComponentName   字符串模版 和 但文件中有效
        2、全局注册
        3、局部注册

        4、模块系统
     -->

    <div id="app">
        <!-- <custom-div></custom-div> -->

        <div>{{ baseVueName }}</div>
        <component-a title="niubi" v-model="isBaby"></component-a>

        <component-b></component-b>

        <button @click="onClickButton">点击</button>

        <!-- <component-c></component-c> -->
        
    </div>

    <script>


        // // 这是一种全局注册组件的方式
        // Vue.component("MyCustomDiv",{
        //     template: "<div>自定义组件</div>"
        // })

        // Vue.component("custom-div",{
        //     // 可以在字符串模版中使用 大驼峰的命名方式，但是在 html 中只支持 短线分隔法
        //     template: "<MyCustomDiv>自定义组件</MyCustomDiv>"
        // })

        // 局部组件注册方式

        let ComponentA = {
            name: "component-a",
            inheritAttrs: false,

            template: `
                <div>
                    {{title}}{{ baby?'宝宝':'大人' }}
                    <input type="text" v-model="age">
                </div>
            `,
            model: {
                prop: "baby",
                event: "change-baby"
            },
            props: {
                baby: {
                    type: Boolean,
                    default: false
                }
            },
            data: function(){
                return {
                    title: "Hello",
                    age: 12
                }
            },
            watch: {
                age: function(value, oldValue){
                    if(parseInt(value)>12){
                        this.baby = false
                        this.$emit('change-baby', false)
                    }else{
                        this.baby = true
                        this.$emit('change-baby', true)
                    }
                    //console.log("age",value,oldValue)
                }
            },
            methods: {
                changeBaby: function(){
                    
                }
            }
        }

        let ComponentB = {
            extends: ComponentA
        }

        // 这种方法拓展基础类
        let BaseVue = Vue.extend({
            
            data: function(){
                return {
                    baseVueName: "基础Vue",
                }
            },
            created: function(){
                console.log("基础实力被创建")
            }
        })

        // 将BaseVue构造成组件
        // Vue.component('component-c', BaseVue)


        let vm = new BaseVue({
            components:{
                "component-a": ComponentA,
                "component-b": ComponentB
            },
            data: {
                isBaby: false
            },
            methods: {
                onClickButton(){
                    this.isBaby = !this.isBaby;
                }
            }, 
        }).$mount('#app')

    </script>
    
</body>
</html>